<html>
  <head>
    <script type="text/javascript" src="/_ah/channel/jsapi"></script>
    <script type="text/javascript" src="/script/jquery-1.7.js"></script>
    <script type="text/javascript" src="/script/roster.js"></script>
    <script type="text/javascript" src="/script/transcript.js"></script>
    <script type="text/javascript" src="/script/sender.js"></script>
    <script type="text/javascript" src="/script/main.js"></script>
    <link rel="stylesheet" type="text/css" href="/stylesheets/chatroom.css"></link>
  </head>
  <body onload="onLoad()">
    <script type="application/json" id="initial-messages">
      {{ initial_messages|safe }}
    </script>
    <script type="text/javascript">
      function onLoad() {
        var main = new Main('{{ token }}', 
                            JSON.parse($('#initial-messages').text()));
      }
    </script>
    <div class='top-container'>
      <div class='transcript' id='transcript-div'>
      </div>
      <div class='roster' id='roster-div'>
      </div>
    </div>
    <div class='bottom-container'>
      <div class='message-box'>
	<form id='message-form'>
	  <input type="text" id="message-text-input"/>
	  <input type="submit" id="message-text-submit" value="Send"/>
	</form>	 
      </div>
    </div>
  </body>
</html>
